<template>
  <work-template v-model="detailForm" @submitOn="submitOn"
                 @closeSelectedTag="closeSelectedTag"
                 :flowId="flowId"
                 :butShow="bool">
    <div slot="form">
      <info-table v-model="detailForm" :state="isEdit"/>
      <attachments v-model="detailForm" :state="isEdit" ref="refAttachments"/>
      <template v-if="isEdit === 'readonly'">
        <cancellationInfo v-model="detailForm" :state="isEdit"/>
        <financeMessahe v-model="detailForm" :state="isEdit"/>
      </template>
    </div>

  </work-template>
</template>

<script>
import {getCancellationDetails, submitCancellationDetails,getDetails} from "@/api/cwgd/cancellation";

export default {
  name: 'HandleCancellation',//处理退保
  components: {
    infoTable: () => import("../components/cancellation/infoTable.vue"),
    attachments: () => import("../components/cancellation/attachments.vue"),
    cancellationInfo: () => import("../components/cancellation/cancellationInfo.vue"),
    financeMessahe: () => import("../components/cancellation/financeMessahe.vue"),
  },
  computed: {
    isEdit() {
      if (this.$route.query.type === "edit") {
        return "write";
      }
      if (this.$route.query.type === "view") {
        return "readonly";
      }
    },
    bool() {
      if (this.$route.query.type === "edit") {
        return true;
      }
      if (this.$route.query.type === "view") {
        return false;
      }
    },
    flowId() {
      if (this.$route.query.flowId) {
        return this.$route.query.flowId
      } else {
        return null
      }
    },
  },
  watch: {},
  data() {
    return {
      detailForm: {
        attachmentUrl: '',
        tableData: [],
      }
    };
  },
  created() {
    if (this.$route.query.type === 'edit') {
      if (typeof this.$route.query.id === 'string') {
        this.handleDetail([this.$route.query.id]);
      } else {
        this.handleDetail(this.$route.query.id);
      }
    }
    if(this.$route.query.type === 'view'){
      this.handleGetDetails()
    }
  },
  mounted() {
  },
  methods: {
    submitOn() {
      this.$refs.refAttachments.handleEffect().then(() => {
        const loading = this.$loading({
          lock: true,
          text: "保存中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        submitCancellationDetails(this.detailForm).then(res => {
          if (res.code === 200) {
            loading.close();
            this.closeSelectedTag()
          }
        }).catch(() => {
          loading.close();
        })
      }).catch(() => {

      })
    },

    closeSelectedTag() {
      this.$tab.closePage().then(({visitedViews}) => {
        this.$router.push({
          path: "/cwgd/cancellationList",
        });
      });
    },

    //获取处理详情
    handleDetail(id) {
      getCancellationDetails(id).then(res => {
        if (res.code === 200) {
          this.detailForm = res.data
        }
      })
    },

    //获取详情
    async handleGetDetails(){
      try {
        const res = await getDetails(this.$route.query.id)
        this.detailForm = res.data
      }catch (e) {
        console.log(e)
      }
    }
  },
};
</script>

<style scoped lang=""></style>


